<!--
 * @Author: Aaron
 * @Date: 2022-03-22 09:42:10
 * @LastEditors: Aaron
 * @LastEditTime: 2022-03-23 14:46:48
 * @Description: file content
 * @FilePath: \ias_ui\src\views\coi\spuChannelInventory\components\modifyCategory.vue
 * @Company: 沃尔玛
-->
<template>
  <el-dialog :title="title" width="500px" :visible.sync="value" :before-close="handleClose" :close-on-click-modal="false">
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px" size="mini">
      <el-form-item label="店内类目" prop="shopCategories">
        <el-cascader
          ref="cascader"
          v-model="form.shopCategories"
          :props="{ children: 'children', label: 'categoryName', expandTrigger: 'hover', value: 'categoryId', multiple: true, emitPath: false }"
          :options="categoryOptions"
          separator=">"
          filterable
          clearable
          collapse-tags
          style="width: 350px"
        />
      </el-form-item>
      <el-form-item label="修改方式" prop="batchOperationType">
        <el-radio-group v-model="form.batchOperationType">
          <el-radio :label="1">追加</el-radio>
          <el-radio :label="2">覆盖</el-radio>
          <el-radio :label="3">删除</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button type="primary" :loading="btnloading" size="mini" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { queryTreeList } from '@/api/coi/onlineTaskAPI/sku.js'
import { geItemById } from '@/utils/processingData.js'
export default {
  name: 'ModifyCategory',
  model: {
    prop: 'value',
    event: 'dialogVisibleChange'
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    channelId: {
      type: String,
      default: ''
    },
    value: {
      type: Boolean,
      default: false
    },
    submitFun: {
      type: Function,
      required: true
    },
    idList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      categoryOptions: [],
      rules: {
        shopCategories: [{ required: true, message: '请选择店内类目', trigger: 'change' }],
        batchOperationType: [{ required: true, message: '请选择修改方式', trigger: 'change' }]
      },
      form: {
        batchOperationType: null,
        shopCategories: []
      },
      btnloading: false
    }
  },
  created() {
    this.getTreeList()
  },
  methods: {
    async getTreeList() {
      const data = { channelId: this.channelId }
      const { result } = await queryTreeList(data)
      this.categoryOptions = result || []
    },
    handleClose() {
      this.$refs.ruleForm.resetFields()
      this.$emit('dialogVisibleChange', false)
    },
    onSubmit() {
      this.$refs.ruleForm.validate((_) => {
        if (_) this.onSubmitRequest()
      })
    },
    async onSubmitRequest() {
      try {
        this.btnloading = true
        const data = {
          spuCodeList: this.idList,
          channelId: this.channelId,
          batchOperationType: this.form.batchOperationType,
          shopCategories: this.form.shopCategories
            .map((_) => geItemById(_, this.categoryOptions, 'children', 'categoryId'))
            .map((_) => {
              return { shopCategoryName: _.categoryName, shopCategoryId: _.categoryId }
            })
        }
        const { code, result: message } = await this.submitFun(data)
        if (code === '0') {
          this.handleClose()
          this.$emit('savaSuccess')
          if (message) {
            this.$message({
              type: 'success',
              message
            })
          }
        }
      } finally {
        this.btnloading = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-dialog__body {
  padding: 10px 20px;
}
/deep/ .el-dialog__header {
  padding-bottom: 10px;
}
</style>
